<template>
  <div class="bigbox">
    <div class="top">
      <el-form
        ref="form"
        :model="form"
        label-position="left"
        label-width="80px"
      >
        <el-row :gutter="20">
          <el-col :span="5">
            <el-form-item label="用电企业">
              <FilterSelect2
                v-model="form.orgNo"
                :optionlist="selectList"
                :valuekey="{ name: 'bizOrgName', value: 'bizOrgNo' }"
              ></FilterSelect2>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="年份">
              <el-date-picker
                size="small"
                v-model="form.dateString"
                type="year"
                value-format="yyyy"
                format="yyyy"
                placeholder="选择年份"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="工单状态">
              <FilterSelect2
                v-model="form.state"
                :optionlist="statusList"
                :valuekey="{ name: 'text', value: 'value' }"
              ></FilterSelect2>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="缺陷等级">
              <FilterSelect2
                v-model="form.level"
                :optionlist="levelList"
                :valuekey="{ name: 'text', value: 'value' }"
              ></FilterSelect2>
            </el-form-item>
          </el-col>
          <el-col :span="4" style="text-align: right">
            <el-form-item>
              <Twobtn @chaxun="getList" @chongzhi="reset"></Twobtn>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="main">
      <TopTile @command="command" @daochu="daochu" @shuaxin="getList"></TopTile>

      <nt-table
        ref="singleTable"
        v-loading="loading"
        row-key="patrolPerson"
        :issize="issize"
        highlight-current-row
        @current-change="handleCurrentChange"
        :tableData="List"
        :tableConfig="tableConfig"
      >
      </nt-table>
      <div style="width: 100%; height: 50%">
        <nt-echart :loading="loading" :options="lineOptions"></nt-echart>
      </div>
    </div>
  </div>
</template>

<script>
import ntEchart from '@/components/nt-echart.vue'
import ntTable from '@/components/nt-table'
import TopTile from '@/components/TopTitle/index.vue'
import dayjs from 'dayjs'
import { exportexcel } from '@/utils/excel'
import { getCompanyApi, getDictionary1Api } from '@/api'
import {
  getListApi,
  getLineApi
} from '@/api/defect-situation/defect-company/index.js'
export default {
  components: { ntEchart, ntTable, TopTile },
  name: 'DefectCompany',
  data() {
    return {
      form: {
        orgNo: '',
        dateString: dayjs().format('YYYY'),
        state: '',
        level: ''
      },
      currentRow: null,
      companyName: '',
      loading: false,
      List: [],
      Line: [],
      issize: 'medium',
      tableConfig: [
        {
          label: '企业',
          prop: 'orgName'
        },
        {
          label: '1月',
          prop: 'oneSum',
          align: 'right'
        },
        {
          label: '2月',
          prop: 'twoSum',
          align: 'right'
        },
        {
          label: '3月',
          prop: 'threeSum',
          align: 'right'
        },
        {
          label: '4月',
          prop: 'fourSum',
          align: 'right'
        },
        {
          label: '5月',
          prop: 'fiveSum',
          align: 'right'
        },
        {
          label: '6月',
          prop: 'sixSum',
          align: 'right'
        },
        {
          label: '7月',
          prop: 'sevenSum',
          align: 'right'
        },
        {
          label: '8月',
          prop: 'eightSum',
          align: 'right'
        },
        {
          label: '9月',
          prop: 'nineSum',
          align: 'right'
        },
        {
          label: '10月',
          prop: 'tenSum',
          align: 'right'
        },
        {
          label: '11月',
          prop: 'elevenSum',
          align: 'right'
        },
        {
          label: '12月',
          prop: 'twelveSum',
          align: 'right'
        }
      ],
      selectList: [],
      xsxzList: [],
      statusList: [
        { text: '全部', value: '' },
        { text: '待提交', value: '0' },
        { text: '待消缺', value: '1' },
        { text: '待验收', value: '2' },
        { text: '驳回', value: '3' },
        { text: '完成', value: '4' }
      ],
      levelList: [
        {
          text: '全部',
          value: ''
        },
        {
          text: '一般缺陷',
          value: '0'
        },
        {
          text: '重要缺陷',
          value: '1'
        },
        {
          text: '紧急缺陷',
          value: '2'
        }
      ]
    }
  },
  computed: {
    lineOptions() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          top: 20
        },
        grid: {
          left: 20,
          right: 20,
          bottom: 10,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: this.currentRow?.orgName,
            type: 'bar',
            barGap: 0,
            data: this.Line.find(
              (i) => i.name === this.currentRow?.orgName
            )?.datalist.map((item) => {
              return [item.timeReading, item.valueReading]
            })
          }
        ]
      }
    }
  },
  async created() {
    await this.getTreeList()
    // await this.getStatusList()
    this.getList()
    this.getLine()
  },
  methods: {
    handleCurrentChange(row) {
      console.log(row)
      if (this.currentRow == row) {
        this.currentRow = null
      } else {
        this.currentRow = row
      }
    },
    command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // async getStatusList() {
    //   const res = await getDictionary1Api('XSGL_RWDZT')
    //   this.statusList = res.data.list
    // },
    async reset() {
      this.form.orgNo = this.selectList[0].bizOrgNo
      this.form.dateString = dayjs().format('YYYY')
      this.form.state = ''
      this.form.level = ''
    },
    // getCompanyName() {
    //   this.companyName = this.selectList.find(
    //     (i) => i.bizOrgNo == this.form.orgNo
    //   )?.bizOrgName
    // },
    async getTreeList() {
      const res = await getCompanyApi()
      this.selectList = res.data.list
      this.form.orgNo = this.selectList[0].bizOrgNo
      this.companyName = this.selectList[0].bizOrgName
    },
    async getList() {
      this.loading = true
      //   this.getCompanyName()
      const res = await getListApi({
        ...this.form
      })
      this.List = res.data.list
      if (this.List.length > 0) {
        await this.$refs?.singleTable.$refs?.table.setCurrentRow(
          res.data.list[0]
        )
      }
      this.loading = false
    },
    async getLine() {
      this.loading = true
      //   this.getCompanyName()
      const res = await getLineApi({
        ...this.form
      })
      this.Line = res.data.list
      this.loading = false
    },
    daochu() {
      exportexcel(
        '/pio-microservice-biz/pio/company/defect/stats/exportExcel',
        {
          ...this.form
        },
        `企业缺陷统计`
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.bigbox {
  display: flex;
  flex-direction: column;
  background-color: #f1f1f1;
  padding: 10px;
  height: 100%;
  .top {
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
    height: 80px !important;
    width: 100% !important;
    margin-bottom: 10px;
    // transition-property: all;
    // transition-duration: 0.2s;
  }
  .main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 20px;
  }
}
</style>
